<template>
    <div class="list-wrapper">
        <div class="list-top">
            <el-form :inline="true" :model="searchForm">
                <el-form-item>
                    <el-date-picker type="month" placeholder="选择月份" v-model="searchForm.month"
                                    style="width: 100%;" @change="search()"></el-date-picker>
                </el-form-item>
                <span style="color: #999;font-size: 12px">* 默认上个月数据</span>
            </el-form>
            <el-upload
                    class="upload-demo myUpload"
                    :action="action"
                    :on-change="fileUploadChange"
                    :file-list="fileList"
                    :auto-upload="false"
                    :on-success="fileUploadSuccess"
                    :on-remove="fileRemove"
                    ref="upload">
                <el-button type="primary" slot="trigger" @click="fileList=[]" style="margin-left:5px;">选择文件</el-button>
                <el-button type="success" @click="submitfiles" :disabled="subDisabled" style="margin-left:20px;">导入考勤
                </el-button>
                <div slot="tip" class="el-upload__tip" @mouseover="myMouseover" @mouseout="myMouseout">
                    只能上传Excel文件，样本请移入此查看
                </div>
            </el-upload>
        </div>
        <div class="table-wrapper">
            <div class="table">
                <table class="list-table" border="0" cellspacing="0" cellpadding="0">
                    <thead>
                    <tr>
                        <th>
                            <span class="icon add" @click="openAddForm"></span>
                        </th>
                        <th>部门</th>
                        <th>分组</th>
                        <th>姓名</th>
                        <th>应出勤</th>
                        <th>出差</th>
                        <th>事假</th>
                        <th>病假</th>
                        <th>年假</th>
                        <th>探亲假</th>
                        <th>生育假</th>
                        <th>其他</th>
                        <th>调休</th>
                        <th>加班</th>
                        <th>伙补</th>
                        <th>工资日</th>
                        <th>全工作日</th>
                        <th width="10%">备注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>
                            <span class="icon edit" @click="edit(item.id)"></span>
                            <span class="icon del" @click="Del(item.id)"></span>
                        </td>
                        <td>{{item.department}}</td>
                        <td>{{item.group}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ychuqin}}</td>
                        <td>{{item.evection}}</td>
                        <td>{{item.affairs_holiday}}</td>
                        <td>{{item.disease_holiday}}</td>
                        <td>{{item.year_holiday}}</td>
                        <td>{{item.family_holiday}}</td>
                        <td>{{item.birth_holiday}}</td>
                        <td>{{item.other}}</td>
                        <td>{{item.days_off}}</td>
                        <td>{{item.overtime}}</td>
                        <td>{{item.board}}</td>
                        <td>{{item.payday}}</td>
                        <td>{{item.workday}}</td>
                        <td v-html="item.comment" style="text-align: left;padding-left: 3px"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="namtc-pagination">
                <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="10"
                                layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="img" ref="img">
            <img src="../../../assets/img/kaoqin.png"/>
        </div>
        <el-dialog title="考勤记录" :visible.sync="popShow" size="tiny">
            <el-form :model="ruleForm" labelWidth="200px" :rules="ruleFormRules" ref="ruleFormRulesName">
                <el-form-item label="部门">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.department" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="分组">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.group" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.name" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="应出勤">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.ychuqin" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="出差">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.evection" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="事假">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.affairs_holiday" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="病假">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.disease_holiday" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="年假">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.year_holiday" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="探亲假">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.family_holiday" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="生育假">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.birth_holiday" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="其他">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.other" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="调休">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.days_off" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="加班">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.overtime" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="伙补">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.board" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="工资日">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.payday" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="全工作日">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.workday" size="small" placeholder="请输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注">
                    <el-col :span="15">
                        <el-input v-model="ruleForm.comment" size="small" placeholder="请输入,多行请用<br>隔开"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-col :span="15">
                        <el-date-picker type="month" placeholder="选择月份" v-model="ruleForm.month"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import ElRadio from "../../../../node_modules/element-ui/packages/radio/src/radio.vue";

    const datas = {
        department: '',
        group: '',
        name: '',
        ychuqin: '',
        evection: '',
        affairs_holiday: '',
        disease_holiday: '',
        year_holiday: '',
        family_holiday: '',
        birth_holiday: '',
        other: '',
        days_off: '',
        overtime: '',
        board: '',
        payday: '',
        workday: '',
        comment: '',
        month: '',

    };
    export default {
        components: {ElRadio},
        data() {
            return {
                post: ['全部', '员工', '主管', '高级主管', '副经理', '经理', '副总经理', '总经理', '助理培训师', '培训师', '高级培训师'],
                searchForm: {
                    month: ''
                },
                ruleForm: _g.cloneJson(datas),
                staffType: [],
                popShow: false,
                ruleFormRules: {
                    name: [{required: true, message: '请输入员工姓名', trigger: 'blur'}],
                },
                list: {},
                action: PATH + 'Operation/leadInAttendance',
                fileList: [],
                subDisabled: true,
                page: 1,
                total: 0,
            }
        },

        created() {
            this.getList();
        },

        methods: {
            getList() {
                let data = {
                    keyword: this.searchForm.month,
                    page: this.page
                };
                this.apiPost("Operation/attendance", data).then(res => {
                    this.list = res.list;
                    this.total = parseInt(res.total)
                });
            },
            handleCurrentChange(val){
                this.page = val
                this.getList()
            },
            search() {
                this.getList();
            },

            changeNumber(item) {
                this.staffType.forEach(ele => {
                    if (this[item].name === ele.name) {
                        this[item].number = ele.number
                    }
                });
            },

            submitForm() {
                this.$refs.ruleFormRulesName.validate((valid) => {
                    if (valid) {
                        this.popShow = false;
                        let data = this.ruleForm;
                        this.apiPost('Operation/addAttendance', data).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getList();
                            } else {
                                this.popShow = true;
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },

            Del(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id: id
                    };
                    this.apiPost('Operation/attendanceDel', data).then(res => {
                        let remind = res.error ? 'error' : 'success';
                        _g.toastMsg(remind, res.msg);
                        if (!res.error) {
                            this.getList();
                        }
                    })
                }).catch(() => {

                });
            },

            edit(id) {
                let data = {id: id};
                this.apiPost('Operation/attendanceDetail', data).then(res => {
                    this.popShow = true;
                    setTimeout(() => {
                        this.$refs.ruleFormRulesName.resetFields();
                        this.ruleForm = res;
                    });
                })
            },

            openAddForm() {
                this.ruleForm = _g.cloneJson(datas);
                this.popShow = true;
                setTimeout(() => {
                    this.$refs.ruleFormRulesName.resetFields();
                })
            },

            /* 图片上传 */
            fileUploadChange(file, fileList) {
                if (fileList.length > 1) {
                    _g.toastMsg('warning', '每次限上传一个文件')
                }
                this.subDisabled = fileList.length !== 1;
            },
            fileRemove(file, fileList) {
                this.subDisabled = fileList.length !== 1;
            },
            fileUploadSuccess(res) {
                _g.closeGlobalLoading();
                let remind = res.error ? 'error' : 'success';
                _g.toastMsg(remind, res.msg);
                if (!res.error) {
                    this.fileList = [];
                    this.getList();
                    setTimeout(() => {
                        this.subDisabled = true;
                    }, 0);
                } else {
                    this.fileList = [];
                    setTimeout(() => {
                        this.subDisabled = true;
                    }, 0);
                }
            },
            submitfiles() {
                this.$refs.upload.submit();
            },

            myMouseover() {
                this.$refs.img.style.display = 'block';
            },

            myMouseout() {
                this.$refs.img.style.display = 'none';
            }

        }
    }
</script>

<style scoped>
    .myUpload {
        margin-right: 80px;
    }

    td, tr, th {
        border: 1px solid #cdcdcd;
    }





    .head ul {
        display: flex;
    }

    .head ul li {
        margin-left: 20px;
        padding: 10px 0;

    }

    .edit {
        background: url(../../../img/edit.gif) no-repeat;
    }

    .del {
        background: url(../../../img/del.png) no-repeat;
    }

    .add {
        background: url(../../../img/add.png) no-repeat;
        width: 24px;
        height: 24px;
    }

    .img {
        position: fixed;
        left: 23%;
        top: 20%;
        display: none;
    }
</style>
